<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page isELIgnored="false" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>我的订单</title>
    <link rel="stylesheet" href="render/css/frontend/common/base.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/common/shop_common.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_header.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_home.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_manager.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/font-awesome.min.css" type="text/css">
    <style type="text/css">
        section.order-type {
            width: 100%;
            height: 25px;
            margin: 10px auto;
            border-bottom: 2px solid #E8E8E8;
        }

        section.order-type div.selected {
            border-bottom: 2px solid #FF0036;
        }

        section.order-type div {
            float: left;
            height: 25px;
        }

        section.order-type div.selected a {
            color: #FF0036;
        }

        section.order-type a {
            border-right: 1px solid #E8E8E8;
            display: inline-block;
            font-size: 13px;
            font-weight: bold;
            color: #000;
            padding: 0 20px;
            text-decoration: none;
        }

        section.order-type a:hover {
            color: #FF0036;
            text-decoration: none;
        }

        tr.dingdan {
            height: 79px;
        }

        span.showAll {
            float: right;
        }

        span.showAll.fa.fa-fw.fa-2x.fa-chevron-down {
            width: 24px;
        }
    </style>
    <style type="text/css">
        <!--

        input, textarea {
            font: 12px Tahoma;
            color: #666666;
            padding: 2px;
            border: solid 1px #DBDBDB
        }

        textarea {
            padding: 5px;
            line-height: 20px
        }

        .case {
            display: block;
            padding: 0 2em 2em 2em;
            /*border: solid 1px #EAEAEA;*/
            background: #FFFFFF;
            margin-top: 2em;
            /* height: 1%; */
            overflow: hidden;
            position: relative;
        }

        /* popHint Style */
        #popHint {
            position: absolute;
            line-height: normal
        }

        #popHint {
            height: 1%;
            overflow: hidden !important;
            overflow /**/: visible
        }

        #popHint .popLeft {
            float: left;
            width: 5px;
            height: 24px;
            background-position: 0 0;
            background-repeat: no-repeat
        }

        #popHint .popRight {
            float: left;
            width: 5px;
            height: 24px;
            background-position: -10px -25px;
            background-repeat: no-repeat
        }

        #popHint .popAngle {
            clear: both;
            position: relative;
            height: 10px
        }

        #popHint .popAngle span {
            position: absolute;
            top: -3px;
            left: 15px;
            width: 7px;
            height: 13px;
            background-position: 0 -75px;
            background-repeat: no-repeat
        }

        #popHintText {
            float: left;
            color: #975400;
            height: 19px !important;
            height /**/: 24px;
            padding: 5px 0 0 0;
            white-space: nowrap;
            background-position: 0 -50px;
            background-repeat: repeat-x;
            overflow: hidden
        }

        #popHintText {
            float: left;
            width: 15px;
            height: 10px;
            margin: 1px 3px 0 0
        }

        #popHint {
            background-position: 0 -90px;
            background-repeat: no-repeat
        }

        #popHint {
            background-position: 0 -105px;
            background-repeat: no-repeat
        }
        #stat_max{
            width: 20px;
            height: 20px;
            /* background-color: red; */
            display: block;
            position: absolute;
            top: 0px;
            /*z-index: 10px;*/
            right: 24px;
            font-weight: 800;
            font-size: 25px;
            cursor: pointer;
        }

        .line-limit-length {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 300px;
        }
        /* 这里可以自己扩展图标.(15*10) */
        -->
    </style>

    <script type="text/javascript" src="render/js/jquery.min.js"></script>

</head>
<body>
<!-- Header Start -->
<jsp:include page="common/head.jsp"></jsp:include>

<!-- TopHeader Center -->
<jsp:include page="common/topheader_center.jsp"></jsp:include>
<!-- TopHeader Center End -->

<!-- Header Menu -->
<jsp:include page="common/header_menu.jsp"></jsp:include>
<!-- Header Menu End -->

<div class="shop_hd_breadcrumb">
    <strong>当前位置：</strong>
    <span>
        <a href="/">首页</a>&nbsp;›&nbsp;
        <a href="/render/myhome">个人中心</a>&nbsp;›&nbsp;
        <a href="/render/myorder">我的订单</a>
    </span>
</div>
<div class="clear"></div>
<!-- 面包屑 End -->
<!-- Header End -->

<!-- 我的个人中心 -->
<div class="shop_member_bd clearfix">
    <!-- 左边导航 -->
    <jsp:include page="common/myshop_left.jsp"></jsp:include>
    <!-- 左边导航 End -->

    <!-- 右边购物列表 -->
    <div class="shop_member_bd_right clearfix">
        <div class="shop_meber_bd_good_lists clearfix">
            <section class="order-type">
                <%--订单状态:0-已取消-10-未付款，20-已付款，40-已发货，50-交易成功，60-交易关闭--%>
                <div class="selected">
                    <a href="javascript:void(0);" order-status="0">全部订单</a>
                </div>
                <div>
                    <a href="javascript:void(0);" order-status="10">未付款</a>
                </div>
                <div>
                    <a href="javascript:void(0);" order-status="20">已付款</a>
                </div>
                <%--<div>
                    <a href="javascript:void(0);" order-status="40">已发货</a>
                </div>
                <div>
                    <a href="javascript:void(0);" order-status="50">交易成功</a>
                </div>
                <div>
                    <a href="javascript:void(0);" order-status="60">交易关闭</a>
                </div>--%>
            </section>
            <table>
                <thead class="tab_title">
                <th style="width:410px;"><span>商品信息</span></th>
                <th style="width:100px;"><span>单价</span></th>
                <th style="width:80px;"><span>数量</span></th>
                <th style="width:100px;"><span>订单总价</span></th>
                <th style="width:115px;"><span>状态与操作</span></th>
                </thead>
                <tbody>
                <c:forEach items="${orders}" var="order">
                    <tr id="${order.id}">
                        <td colspan="5">
                            <table class="good" order-status="${order.status}" oid="${order.id}" id="${order.id}">
                                <thead>
                                    <tr>
                                        <th colspan="2" style="width:412px;">
                                            <span><strong>订单号码：</strong>${order.order_no}</span>
                                        </th>
                                        <th colspan="2" style="width:174px;">
                                            <%--fa fa-fw fa-chevron-down fa-4x--%>
                                            <span onclick="changeTr('${order.id}',this);" class="showAll fa fa-fw fa-chevron-down fa-2x"></span>
                                        </th>
                                        <th colspan="1" style="width:88px;">
                                            <c:if test="${order.status=='10'}">
                                                <a href="javascript:void(0);" onclick="changeOrderStatus('${order.id}',10,'${order.order_no}');" class="order-button blue">你未付款</a>
                                            </c:if>
                                            <c:if test="${order.status=='20'}">
                                                <a href="javascript:void(0);" class="order-button blue">你已付款</a>
                                            </c:if>
                                        </th>
                                        <th colspan="1" style="width:108px;">
                                            <span class="fa fa-fw fa-trash-o" onclick="deleteOrderItem('${order.id}');"></span>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <c:forEach items="${order.orderItem}" var="orderitem" varStatus="status">
                                        <tr class="dingdan" style="display: none;">
                                            <td class="dingdan_pic">
                                                <a href="/render/product/product_detail?id=${orderitem.product_id}"><img src="${orderitem.product_image}"/></a>
                                            </td>
                                            <td class="dingdan_title">
                                                <span class="line-limit-length"><a href="/render/product/product_detail?id=${orderitem.product_id}">${orderitem.product_name}</a></span><br/>
                                            </td>
                                            <td class="dingdan_danjia">￥<strong>${orderitem.current_unit_price}</strong>
                                            </td>
                                            <td class="dingdan_shuliang">${orderitem.quantity}</td>
                                            <td class="dingdan_zongjia">￥<strong>${orderitem.total_price}</strong><br/>(免运费)</td>
                                            <%--订单状态:0-已取消-10-未付款，20-已付款，40-已发货，50-交易成功，60-交易关闭--%>
                                            <%--订单状态:0-已取消--%>
                                            <c:if test="${orderitem.user_status=='0'&&orderitem.shop_status=='60'}">
                                                <td class="digndan_caozuo">
                                                    <br>
                                                    <%--该订单显示交易关闭--%>
                                                    <a href="javascript:void(0);" class="order-button blue">已取消</a>
                                                    <br>
                                                    <br>
                                                </td>
                                            </c:if>
                                            <c:if test="${orderitem.user_status=='10'}">
                                                <td class="digndan_caozuo">
                                                    <br>
                                                    <%--该订单显示交易关闭--%>
                                                    <a href="javascript:void(0);" class="order-button blue">未支付</a>
                                                    <br>
                                                    <br>
                                                </td>
                                            </c:if>
                                            <%--，20-已付款,获取店家和--%>
                                            <c:if test="${orderitem.user_status=='20'}">
                                                <td class="digndan_caozuo">
                                                    <br>
                                                    <%--无法点击--%>
<%--                                                    <a href="javascript:void(0);" class="order-button white">已付款</a>--%>
<%--                                                    <br>--%>
<%--                                                    <br>--%>
<%--                                                    <c:if test="${orderitem.shop_status=='30'}">--%>
                                                    <a href="javascript:void(0);" class="order-button blue">未发货</a>
                                                    <br>
                                                    <br>
<%--                                                    </c:if>--%>

                                                    <a href="javascript:void(0);" onclick="changeOrderItemStatus('0', '${orderitem.id}', '${orderitem.shop_id}');" class="order-button blue">退货</a>
                                                    <br>
                                                    <br>
                                                    <%--退货--%>
                                                </td>
                                            </c:if>
                                            <%--，40-已发货--%>
                                            <c:if test="${orderitem.user_status=='40'}">
                                                <td class="digndan_caozuo">
                                                    <br>
                                                    <%--无法点击--%>
                                                    <a href="javascript:void(0);" class="order-button white">已发货</a>
                                                    <br>
                                                    <br>
                                                    <%--点击过后，就提示确认收货，确定或取消--%>
                                                    <a href="javascript:void(0);" onclick="changeOrderItemStatus('50', '${orderitem.id}', '${orderitem.shop_id}');" class="order-button blue">确认收货</a>
                                                    <br>
                                                    <br>
                                                    <a href="javascript:void(0);" onclick="changeOrderItemStatus('0', '${orderitem.id}', '${orderitem.shop_id}');" class="order-button blue">退货</a>
                                                    <br>
                                                    <br>
                                                </td>
                                            </c:if>
                                            <%--，50-交易成功--%>
                                            <c:if test="${orderitem.user_status=='50'}">
                                                <td class="digndan_caozuo">
                                                    <br>
                                                    <a href="javascript:void(0);" class="order-button white">交易完成</a>
                                                    <br>
                                                    <br>
                                                    <%--点击发送id---搜索指定class---生成textarea--%>
                                                    <c:if test="${empty orderitem.comment}">
                                                        <a href="javascript:void(0);"
                                                           onclick="createText('${order.id}','${orderitem.id}',this,'${orderitem.product.id}');"
                                                           class="order-button blue lookComment">商品评论</a>
                                                    </c:if>
                                                    <%--查看该订单是否已经有评论--%>
                                                    <c:if test="${!empty orderitem.comment}">
                                                        <a href="javascript:void(0);"
                                                           onclick="lookText('${order.id}','${orderitem.id}',this);"
                                                           class="order-button blue lookComment">查看评论</a>
                                                    </c:if>
                                                    <br>
                                                    <br>
<%--                                                    <a href="javascript:void(0);" class="order-button blue">订单详情</a>--%>
                                                </td>
                                            </c:if>
                                            <%--，60-交易关闭--%>
                                            <c:if test="${orderitem.user_status=='60'}">
                                                <td class="digndan_caozuo">
                                                    <br>
                                                    <a href="javascript:void(0);" class="order-button white">交易失败</a>
                                                    <br>
                                                    <br>
                                                    <%--&lt;%&ndash;点击发送id---搜索指定class---生成textarea&ndash;%&gt;
                                                    <c:if test="${empty orderitem.comment}">
                                                        <a href="javascript:void(0);" onclick="createText('${order.id}','${orderitem.id}',this,'${orderitem.product.id}');" class="order-button blue lookComment">商品评论</a>
                                                    </c:if>--%>
                                                    <%--查看该订单是否店家回复--%>
                                                    <c:if test="${!empty orderitem.comment}">
                                                        <a href="javascript:void(0);" onclick="lookText('${order.id}','${orderitem.id}',this);" class="order-button blue lookComment">查看回复</a>
                                                        <br>
                                                        <br>
                                                    </c:if>
                                                </td>
                                            </c:if>
                                        </tr>
                                        <tr class="${orderitem.id}" style="display: none;" id="${orderitem.id}">
                                            <th colspan="6">
                                                <div class="case">
                                                    <c:if test="${empty orderitem.comment}">
                                                        <%-- id="${orderitem.id}"--%>
                                                        <textarea name="Test_1" class="Test_1"
                                                                  rows="3" style="width: 99%">悟空你也太调皮了，我跟你说过，叫你不要乱扔东西， 乱扔东西这么做…… （咣当，悟空棍子掉在地上）</textarea>
                                                        <span id="stat_max" onclick="closeComment('${order.id}', '${orderitem.id}', this);">×</span>
                                                    </c:if>
                                                    <c:if test="${!empty orderitem.comment}">
                                                        <%-- id="${orderitem.id}"--%>
                                                        <textarea name="Test_1" class="Test_1" rows="3" style="width: 99%"
                                                                  readonly>${orderitem.comment.content}<c:if test="${!empty orderitem.comment.reply}">&#10;店家回复：${orderitem.comment.reply}&#13;</c:if>
                                                        </textarea>
                                                        <span id="stat_max" onclick="closeComment('${order.id}', '${orderitem.id}', this);">×</span>
                                                    </c:if>
                                                </div>
                                            </th>
                                        </tr>
                                    </c:forEach>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 右边购物列表 End -->
</div>
<!-- 我的个人中心 End -->

<!-- Footer - wll -->
<jsp:include page="common/footer.jsp"></jsp:include>
<!-- Footer End -->
</body>
<%--<script type="text/javascript" src="render/js/frontend/HFAlert.js"></script>--%>
<script type="text/javascript" src="render/js/stringLimit.js"></script>

<script type="text/javascript">

    /*修改订单状态*/
    function changeOrderStatus(oid,status,order_no) {
        /*0-已取消(...), 10-未付款(), 20-已付款, 60-交易关闭(),订单*/
        /*0：都是已取消，10：都是未付款，20：下面，60：下面就是交易完成*/
        /*40-已发货(退货,确认收货)，50-交易成功(评价,退货)，订单子项*/
        var url='/render/order/changeStatus';
        $.ajax({
            type: 'post',
            url: url,
            data: {
                'status':status ,
                'oid':oid,
                'order_no':order_no
            },
            success: function (data) {
                <%--订单状态:0-已取消-10-未付款，20-已付款，40-已发货，50-交易成功，60-交易关闭--%>
                if (data.success){
                    if (data.message==10) {
                        HFconfirm({title:'支付成功', type:'success', confirmButtonText: '确定', cancelButtonText: '取消', width: 400, callback:function () {
                            // window.location.href='/render/order/myorder';
                            window.location.href='/render/myorder';
                        },cancelCallback:function () {
                            console.log("失败");
                        }});
                    }else if (data.message==50) {
                        HFconfirm({title:'交易成功', type:'success', confirmButtonText: '确定', cancelButtonText: '取消', width: 400, callback:function () {
                            // window.location.href='/render/order/myorder';
                            window.location.href='/render/myorder';
                        },cancelCallback:function () {
                            console.log("失败");
                        }});
                    }
                } else {
                    if (data.message==10) {
                        HFalert({title:"支付失败", type: 'warning', confirmButtonText: '确定'});
                    }else if (data.message==50) {
                        HFalert({title:"交易失败", type: 'warning', confirmButtonText: '确定'});
                    }else{
                        HFalert({title:"未知的错误", type: 'error', confirmButtonText: '确定'});
                    }
                }
            }
        });
    }

    function changeOrderItemStatus(status, orderitem_id, shop_id) {
        var url='/render/orderitem/changeStatus';
        $.ajax({
            type: 'post',
            url: url,
            data: {
                'status': status,
                'orderitem_id': orderitem_id,
                'shop_id':shop_id
            },
            success: function (data) {
                if (data.success){
                    if (data.message == 0) {
                        // HFalert({title:"", type: 'success', confirmButtonText: '确定'});
                        HFconfirm({title:'退货成功', type:'success', confirmButtonText: '确定', cancelButtonText: '取消', width: 400, callback:function () {
                            // window.location.href='/render/order/myorder';
                            window.location.href='/render/myorder';
                        }});
                    }else if (data.message == 50) {
                        HFconfirm({title:'确认收货', type:'success', confirmButtonText: '确定', cancelButtonText: '取消', width: 400, callback:function () {
                            // window.location.href='/render/order/myorder';
                            window.location.href='/render/myorder';
                        }});
                    }else{
                        HFalert({title:"成功,但无["+data.message+"]该状态", type: 'success', confirmButtonText: '确定'});
                    }
                } else {
                    if (data.message == 0) {
                        HFalert({title:"退货失败", type: 'warning', confirmButtonText: '确定'});
                    }else if (data.message == 50) {
                        HFalert({title:"确认收货", type: 'warning', confirmButtonText: '确定'});
                    }else{
                        HFalert({title:"成功,但无["+data.message+"]该状态", type: 'warning', confirmButtonText: '确定'});
                    }
                }
            }
        });
    }

    function lookText(id, textId, obj) {
        $("#" + id).find("tr." + textId).each(function (i) {
            if (i >= 0) {
                if (this.style.display == "none") {
                    this.style.display = "";
                    $(obj).text("收起评论");
                } else {
                    this.style.display = "none";
                    $(obj).text("查看评论");
                }
            }
        });
    }

    function closeComment(id, textId) {
        $("#" + id).find("tr." + textId).each(function (i) {
            if (i>=0){
                this.style.display = "none";
                // console.log("$(this).prev().find(\".lookComment\").text()="+$(this).prev().find(".lookComment").text());
                if ($(this).prev().find(".lookComment").text() == "提交评论") {
                    $(this).prev().find(".lookComment").text("商品评论");
                }else {
                    $(this).prev().find(".lookComment").text("查看评论");
                }
            }
        });
    }

    function createText(id, textId, obj, pid) {
        $("#" + id).find("tr." + textId).each(function (i) {
            if (i >= 0) {
                if ($(obj).text() == "查看评论") {
                    this.style.display = "";
                    $(obj).text("收起评论");
                } else if ($(obj).text() == "收起评论") {
                    this.style.display = "none";
                    $(obj).text("查看评论");
                } else if (this.style.display == "none") {
                    this.style.display = "";
                    $(obj).text("提交评论");
                } else {
                    //需要传递pid|nid、parent_id、comment
                    //pid换为order_id
                    var url = "/render/comment/insert";
                    $.ajax({
                        url: url,
                        type: "post",
                        data: {
                            pid: pid,
                            oiid: textId,
                            comment: $("." + textId).find(".Test_1").val()
                        },
                        success: function (data) {
                            if (!data.success) {
                                HFalert({title: data.message, type: 'success', confirmButtonText: '确定'});
                                return;
                            }
                            HFalert({title: data.message, type: 'warning', confirmButtonText: '确定'});
                        }
                    });
                    this.style.display = "none";
                    $(obj).text("查看评论");
                    $("." + textId).find(".Test_1").attr('readonly', true);
                }
            }
        });
    }

    $(".order-type a").click(function () {
        var orderStatus = $(this).attr("order-status");
        if ('0' === orderStatus) {
            $("table[order-status]").show();
        } else {
            $("table[order-status]").hide();
            $("table[order-status=" + orderStatus + "]").show();
        }
        $(".order-type div").removeClass("selected");
        $(this).parent("div").addClass("selected");
    });

    function deleteOrderItem(oid) {
        HFconfirm({title:'确认删除', type:'success', confirmButtonText: '确定', cancelButtonText: '取消', width: 400, callback:function () {
            var url='/render/order/deleteOrder';
            $.ajax({
                type: 'post',
                url: url,
                data: {
                    oid: oid
                },
                success: function (data) {
                    if (data.success){
                        // HFalert({title:data.message, type: 'success', confirmButtonText: '确定'});
                        $('#'+oid).remove();
                    } else {
                        HFalert({title:data.message, type: 'warning', confirmButtonText: '确定'});
                    }
                }
            });
        }});
    }

    function changeTr(id, obj) {
        $("#" + id).find("tr.dingdan").each(function (i) {
            if (i >= 0) {
                if (this.style.display == "none") {
                    this.style.display = "";
                    // $(obj).text("收缩");
                    $(obj).addClass("fa-chevron-up");
                    $(obj).removeClass("fa-chevron-down");
                } else {
                    this.style.display = "none";
                    // $(obj).text("展开");
                    $(obj).addClass("fa-chevron-down");
                    $(obj).removeClass("fa-chevron-up");
                }
            }
        });
    }
</script>
</html>